<template>
  <div class="home-wrap global-wrap">
    <p class="global-title">- 拍摄上传银行卡正面 -</p>
    <div class="idCard-wrap">
      <div class="img-item">
        <choose-image
          :cover="bankCardFrontImg"
          ref="bankImg"
          @resetImg="resetImg($event)"
          @success="success($event, 'front')"
        ></choose-image>
      </div>
    </div>
    <div class="form-wrap">
      <van-form @submit="onSubmit" class="form">
        <van-field
          class="field"
          v-model="formData.openBank"
          name="openBank"
          label="银行名称"
          :rules="[{ required: true, message: '请填写银行名称' }]"
        />
        <van-field
          v-model="formData.bankNumber"
          name="bankNumber"
          label="银行卡号"
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />

        <div class="button-wrap">
          <div class="prev-step" @click="$router.back()">上一步</div>
          <van-button
            round
            block
            type="info"
            :disabled="!formData.idNumber || !formData.bankIdFront"
            native-type="submit"
          >
            下一步
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import loading from "@/globalComponents/Loading/loading";
import { Field, Form, Button, Dialog, Toast } from "vant";
import ChooseImage from "@/components/chooseImage";
import bankCardFrontImg from "@/assets/image/银行卡正面.png";
import { imgIdentity } from "@/api";

export default {
  name: "BankCard",
  components: {
    loading,
    ChooseImage,
    [Field.name]: Field,
    [Form.name]: Form,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      formData: {},
      bankCardFrontImg,
    };
  },
  activated() {
    const basicInfo = this.$route.params.basicInfo;
    console.log(basicInfo, 76);
    if (basicInfo) {
      this.formData = basicInfo;
    }
    console.log(this.formData.idNumber, 80);
    if (!this.formData.idNumber) {
      Dialog.alert({
        title: "错误",
        message: "请先填写基本信息",
        theme: "round-button",
        confirmButtonText: "立即填写",
      }).then(() => {
        const query = this.$route.query && this.$route.query.QRCode ? {'QRCode': this.$route.query.QRCode} : {}
        this.$router.replace({path: 'personInfo', query});
      });
    }
  },
  methods: {
    // 图片获取完成
    success(data) {
      const { smallImg, largerImg } = data;
      this.getImgInfo(smallImg, largerImg);
    },

    // 图片识别文字
    getImgInfo(smallImg, largerImg) {
      const fd = new FormData();
      fd.append("file", smallImg);
      fd.append("imgType", 1);
      imgIdentity(fd).then(
        (res) => this.valuationData(res, largerImg),
        (err) => {
          this.valuationData();
          this.$refs.bankImg.reset();
        }
      );
    },
    // 重选图片，重置字段
    resetImg() {
      this.valuationData();
    },
    // 字段统一赋值操作
    valuationData(data = {}, largerImg = undefined) {
      this.formData.bankIdFront = largerImg || undefined;
      this.formData.openBank = data.bankInfo || undefined;
      this.formData.bankNumber = data.cardNo || undefined;
    },
    onSubmit() {
      this.$router.push({
        name: "SubjoinInfo",
        params: { basicInfo: Object.assign({}, this.formData) },
        query: { QRCode: this.formData.qrcode },
      });
    },
  },
};
</script>

<style lang='stylus' scoped>
.idCard-wrap
  width 100%
  display flex
  font-size 0
  justify-content center
  .img-item
    width 60%
.form-wrap
  padding 18px 0
  & .van-field
    padding 4.5px 0
    &::after
      display none
  & >>> .van-field__label
    width 4em
    text-align right
    color #99ACBF
    font-size 15px
    display inline-flex
    line-height 1.1em
    align-items center
    flex-direction row-reverse
    height 36px
  & >>> .van-field__control:disabled
    color #323233
    -webkit-text-fill-color #323233
  & >>> .van-field__body
    height 36px
    background #F4F7F8
    border-radius 5px
    padding 0 5px
    box-sizing border-box
  .button-wrap
    display flex
    justify-content center
    margin 25px 0
    cursor pointer
    .prev-step
      height 42px
      line-height 42px
      background #0DC2FF
      padding 0 33px
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      text-align center
      border-radius 999px
      color white
      margin-right 20px
      font-size 14px
    & >>> .van-button
      display inline-flex
      width auto
      height 42px
      padding 0
      background #0DC2FF
      box-shadow 0px 5px 5px 0px rgba(13, 194, 255, 0.35)
      border none
    & >>> .van-button__content
      display inline-flex
      padding 0 33px
</style>